<script setup lang="ts">
import { ref, onMounted } from 'vue';

/**
 非空断言
 - 你比TS更加清楚此时该属性已经有值了
 
 总结:
 1) 如果只是去拿DOM对象的属性值, 或者调用DOM对象的方法, 推荐用 可选链
 2) 如果要修改DOM对象的属性值, 推荐用类型守卫
 3) 只有当你十分确定有值时, 可以用 非空断言
 */
const input = ref<HTMLInputElement | null>(null)

// console.log(input.value!.value);
// input.value!.value = '你好'

onMounted(() => {
  // 1. 可选链
  // 属性加了可选链, 只能去获取, 不能去赋值
  // console.log(input.value?.value);
  // input.value?.value = '你好呀'

  // 2. 类型守卫
  // 既可以获取数据, 也可以修改
  // if (input.value) {
  //   console.log(input.value.value);
  //   input.value.value = '不用试试,就可以'
  // }

  // 3. 非空断言
  // ! 告诉TS此处一定有值
  // 既可以获取数据, 也可以修改
  // 但, 一定一定一定要确定有值, 否则会出错
  // console.log(input.value!.value);
  // input.value!.value = '你好'
})

</script>

<template>
  <input ref="input" type="text" value="123">
</template>

<style scoped></style>
